<template>
	<view>
		<view v-if="venueData">
			<view>
				<u-swiper :list="venueData.imgList" :height="500" @click="bannerClick"></u-swiper>
			</view>
			<view style="position: relative;top:-30rpx;">
				<view style="margin-bottom: 20rpx; background-color: #ffffff;padding: 20rpx 30rpx 20rpx 30rpx;border-radius: 20rpx;">
					<view style="font-size: 37rpx;font-weight: 600;line-height: 80rpx;">
						{{ venueData.venueName }}
					</view>
					
					<u-cell-group :border="false">
						<u-cell title="运营企业"  class="custom-cell-padding" :value="venueData.companyName"></u-cell>
						<u-cell title="占地面积"  class="custom-cell-padding" :value="venueData.area"></u-cell>
						<u-cell title="联系人"  class="custom-cell-padding" :value="venueData.contacts"></u-cell>
						<u-cell title="联系电话"  class="custom-cell-padding" :value="venueData.phone"></u-cell>
						
						<u-cell title="营业时间"  class="custom-cell-padding" :value="venueData.tradeStartTime+'-'+venueData.tradeEndTime"></u-cell>
						<u-cell title="场馆地址"  class="custom-cell-padding" :label="venueData.address"></u-cell>
						<u-cell title="营业执照或合同书"  class="custom-cell-padding" isLink @click="documentImgPerview" ></u-cell>
						<u-cell title="当前状态" :border="false"  class="custom-cell-padding" 
						:value="(venueData.status == 0?'审核中':venueData.status == 1?'已入驻':venueData.status == 2?'未通过':venueData.status == 3?'已撤销':venueData.status == 4?'已取消': '其他')" 
						:label="(venueData.status == 2?'拒绝理由：'+venueData.auditReason:'')"></u-cell>
					</u-cell-group>
				</view>
				<view style="margin-bottom: 20rpx; background-color: #ffffff;padding: 20rpx 30rpx 20rpx 30rpx;border-radius: 10rpx;">
					<view style="font-size: 30rpx;font-weight: 600;line-height: 50rpx;">
						 场馆设施
					</view>
					<view style="font-size: 30rpx;">
						<view class="tags">
							<view v-for="(item, index) in venueData.facilitiesList" :key="index" class="tagItem">
								<u-tag plain :text="facilitiesMap[item]"></u-tag>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-bottom: 20rpx; background-color: #ffffff;padding: 20rpx 30rpx 20rpx 30rpx;border-radius: 10rpx;">
					<view style="font-size: 30rpx;font-weight: 600;line-height: 50rpx;">
						 场馆服务
					</view>
					<view style="font-size: 30rpx;">
						<view class="tags">
							<view v-for="(item, index) in venueData.servicesList" :key="index" class="tagItem">
								<u-tag plain :text="servicesMap[item]"></u-tag>
							</view>
						</view>
					</view>
				</view>
				<view style="margin-bottom: 20rpx; background-color: #ffffff;padding: 20rpx 30rpx 20rpx 30rpx;border-radius: 10rpx;">
					<view style="font-size: 30rpx;font-weight: 600;line-height: 50rpx;">
						 场馆介绍
					</view>
					<view style="font-size: 30rpx;">
						<u-parse :content="venueData.venueDescription"></u-parse>
					</view>
				</view>
				<view style="margin-bottom: 20rpx; background-color: #ffffff;padding: 20rpx 40rpx 20rpx 40rpx;border-radius: 10rpx;">
					<view style="font-size: 30rpx;font-weight: 600;line-height: 50rpx;">
						 预约须知
					</view>
					<view style="font-size: 30rpx;">
						<u-parse :content="venueData.reservationNotice"></u-parse>
					</view>
				</view>
			</view>
			<view style="position: sticky;bottom: 0rpx; " v-if="venueData.status == 2">
				<u-button type="primary" text="重新提交审批" @click="edit" color="#0544ab" customStyle="border-radius: 0rpx;"></u-button>
			</view>
			<view  v-if="venueData.status == 1" style="position: sticky;bottom: 20rpx;padding: 10rpx 30rpx">
				<u-button type="primary" text="修改场馆信息" @click="editBaseInfo" color="#0544ab" customStyle="border-radius: 0rpx;"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			venueData:{
				type: Object
			}
		},
		data() {
			return {
				//场馆设置
				facilitiesMap: {},
				//场馆服务
				servicesMap: {}
			}
		},
		methods: {
			//初始化加载方法
			initData(){
				this.fetchVenuePlan();
				this.fetchVenueService();
			},
			// 获取场馆设施
			fetchVenuePlan() {
				this.$request({
					url: '/blade-client-business/app/dict/getVenueFacilities'
				}).then(res => {
					if (res?.code === 200) {
						var facilitiesMap = {};
						if(res.data.length > 0){
							res.data.forEach(item => {
								facilitiesMap[item.dictKey] = item.dictValue;
							});
						}
						this.facilitiesMap = facilitiesMap;
					}
				})
			},
			// 获取场馆服务
			fetchVenueService() {
				this.$request({
					url: '/blade-client-business/app/dict/getVenueServices'
				}).then(res => {
					if (res?.code === 200) {
						var servicesMap = {};
						if(res.data.length > 0){
							res.data.forEach(item => {
								servicesMap[item.dictKey] = item.dictValue;
							});
						}
						this.servicesMap = servicesMap;
					}
				})
			},
			//轮播图点击预览
			bannerClick(index){
				this.previewImage(index,this.venueData.imgList);
			},
			//营业执照预览
			documentImgPerview(){
				var documentImg = this.venueData.documentImg;
				if(documentImg){
					var documentImgList = [documentImg];
					this.previewImage(0, documentImgList);
				} else {
					uni.$u.toast("暂无图片资源")
				}
			},
			//预览图片
			previewImage(index,list) {
			  uni.previewImage({
				current: index, // 当前显示图片索引
				urls: list // 需要预览的图片http链接列表
			  });
			},
			//修改场馆信息
			editBaseInfo(){
				if(this.venueData.status == 1){
					uni.navigateTo({
						url: '/pagesWorkbenches/pages/venue/edit/editBaseInfo'
					})
				}
			},
			//重提提交审批，edit
			edit(){
				if(this.venueData.status == 2){
					uni.navigateTo({
						url: '/pagesWorkbenches/pages/venue/edit/edit'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		.tags {
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			display: flex;
			
			.tagItem {
				margin-right:10rpx;margin-bottom:10rpx;
			}
			
		}
		
		.custom-cell-padding {
		  /deep/ .u-cell__body {
		    padding-left: 0px; // 调整为你想要的值
		  }
		}
	}
</style>